<template>
  <div class="form-group" style="padding-right:30px;">
    <div class="row">
      <div class="col-lg-12">
        <span>店舗条件</span>
      </div>
    </div>
    <div class="row" style="margin-top:5px;">
      <div class="col-lg-12">
        <input
          type="button"
          :value="storeText"
          id="storeButton"
          class="form-control input-sm"
          @click="showStoreModal()"
        />
      </div>
    </div>
    <div style="border-bottom:1px solid #dddddd;margin-top:10px;"></div>
  </div>
</template>

<script>
import storeModule from "store";
export default {
  name: "menuStoreComponent",
  data: function() {
    return {
      store_instance: new storeModule(window.$),
      storeText: "店舗選択"
    };
  },
  props: {
    store: {
      type: Object
    },
    company: {
      type: String
    },
    mast: {
      type: Object
    },
    isfav: {
      type: Object
    }
  },
  methods: {
    //显示店铺插件
    showStoreModal() {
      this.store_instance.show();
    },
    /**
     * 初始化店铺插件
     */
    initStoreModule() {
      var vm = this;
      var storeModuleParam = {
        usercd: global.userCd,
        elementId: "storeButton",
        tab: "1-1",
        level: "s-b-t",
        option: "1-1-1",
        callback: {
          afterSelectedOK: function() {
            vm.store.value = vm.store_instance.getStoresFav();
            vm.store.type = vm.store_instance.getStoreType();
          }
        }
      };
      if (this.mast.type === "company") {
        storeModuleParam.kigyoucd = this.company;
      } else {
        storeModuleParam.kigyoucd = global.suntoryCd;
        storeModuleParam.isCoreKigyo = "1";
        storeModuleParam.subkigyoucds = this.company;
      }
      storeModuleParam.mstclass = this.mast.value;
      if (this.store.time !== "") {
        var timeArr = this.store.time.toString().split("~");
        storeModuleParam.startTime = timeArr[0];
        storeModuleParam.endTime = timeArr[1];
        storeModuleParam.timeType = this.store.timeType;
      } else {
        var yTimeDate = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
        var yTime =
          "" +
          yTimeDate.getFullYear() +
          (yTimeDate.getMonth() + 1) +
          (yTimeDate.getDate().toString().length < 2
            ? "0" + yTimeDate.getDate()
            : yTimeDate.getDate());
        storeModuleParam.startTime = yTime;
        storeModuleParam.endTime = yTime;
        storeModuleParam.timeType = "M";
      }
      this.store_instance.init(storeModuleParam);
    }
  },
  computed: {
    listenChange() {
      const { company, mast } = this;
      return { company, mast };
    }
  },
  watch: {
    listenChange(newValue, oldValue) {
      if (this.isfav.store) {
        this.initStoreModule();
        this.isfav.store = false;
      } else {
        if (
          newValue.company !== oldValue.company ||
          newValue.mast.type !== oldValue.mast.type ||
          newValue.mast.value !== oldValue.mast.value
        ) {
          this.initStoreModule();
          this.store.value = [];
        }
      }
    },
    "store.time"() {
      var times = this.store.time.toString().split("~");
      this.store_instance.setTime({
        start: times[0],
        end: times[1],
        type: this.store.timeType
      });
    },
    "store.timeType"() {
      var times = this.store.time.toString().split("~");
      this.store_instance.setTime({
        start: times[0],
        end: times[1],
        type: this.store.timeType
      });
    },
    "store.value"() {
      if (
        this.store.value.join(",") !==
        this.store_instance.getStoresFav().join(",")
      ) {
        this.store_instance.setStores({
          storeArr: this.store.value,
          type: this.store.type
        });
      }
    }
  },
  mounted() {
    this.initStoreModule();
  }
};
</script>